<template>
  <div>
    <!-- 顶部多条件搜索框 -->
    <el-form :inline="true" :model="feeSearch" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      </el-form-item>
      <el-form-item label="小区">
        <el-select v-model="feeSearch.cell.cid" placeholder="请选择小区" filterable clearable>
          <el-option v-for="item in cellList" :key="item.cid" :label="item.cname" :value="item.cid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收费项目">
        <el-select v-model="feeSearch.fname.fnid" placeholder="请选择收费项目" filterable clearable>
          <el-option v-for="item in fnameList" :key="item.fnid" :label="item.fname" :value="item.fnid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAllFeeButton">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 显示所有数据的表格 -->
    <el-table :data="feeList" style="width: 100%" @selection-change="selsChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="fid" label="编号" width="60"></el-table-column>
      <el-table-column prop="cell.cname" label="小区名称" width="90"></el-table-column>
      <el-table-column prop="fnid" label="收费项目">
        <!-- 要改fname这个表名，不然的话fname.fname不生效的 -->
        <template slot-scope="scope">
          <span v-if="scope.row.fnid == 1">代收水费</span>
          <span v-if="scope.row.fnid == 2">代收电费</span>
          <span v-if="scope.row.fnid == 3">代收燃气费</span>
          <span v-if="scope.row.fnid == 4">物业费</span>
          <span v-if="scope.row.fnid == 5">停车费</span>
          <span v-if="scope.row.fnid == 6">车位费</span>
          <span v-if="scope.row.fnid == 7">费用A</span>
          <span v-if="scope.row.fnid == 8">费用A</span>
          <span v-if="scope.row.fnid == 9">费用A</span>
          <span v-if="scope.row.fnid == 10">费用A</span>
        </template>
      </el-table-column>
      <el-table-column prop="ftype" label="项目类别"></el-table-column>
      <el-table-column prop="calcumethod" label="金额计算方式" width="130px"></el-table-column>
      <el-table-column prop="uprice" label="单价"></el-table-column>
      <el-table-column prop="measuring" label="计量方式"></el-table-column>
      <el-table-column prop="cycle" label="收费周期"></el-table-column>
      <!-- 操作栏 -->
      <el-table-column label="　　　操作"> <!-- elementui中vue的&nbsp; 占位符不生效，可以使用搜狗输入法的‘空’特殊字符-->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑和新增 弹出的对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :model="feeForm" label-width="80px" :rules="dialogRules" ref="feeUpOrAdd">
        <el-form-item label="小区" prop="cell.cid">
          <el-select v-model="feeForm.cell.cid" placeholder="请选择小区名称" filterable clearable>
            <el-option v-for="item in cellList" :key="item.cid" :label="item.cname" :value="item.cid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收费项目" prop="fname.fnid">
          <el-select v-model="feeForm.fname.fnid" placeholder="请选择收费项目" filterable clearable>
            <el-option v-for="item in fnameList" :key="item.fnid" :label="item.fname" :value="item.fnid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目类别" prop="ftype">
          <el-input v-model="feeForm.ftype" placeholder="请输入项目类别描述" clearable></el-input>
        </el-form-item>
        <el-form-item label="金额计算方式" prop="calcumethod">
          <el-input v-model="feeForm.calcumethod" placeholder="请输入金额计算方式"></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="uprice">
          <el-input v-model="feeForm.uprice" placeholder="请输入单价"></el-input>
        </el-form-item>
        <el-form-item label="计量方式" prop="measuring">
          <el-input v-model="feeForm.measuring" placeholder="请输入计量方式"></el-input>
        </el-form-item>
        <el-form-item label="收费周期" prop="cycle">
          <el-input v-model="feeForm.cycle" placeholder="请输入收费周期"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('feeUpOrAdd')">取消</el-button>
        <el-button type="primary" @click="upOrAdd('feeUpOrAdd')">提交</el-button>
      </div>
    </el-dialog>
    <!-- 分页组件 -->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[2, 3, 4]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 查询
      feeSearch: {
        cell: {
          cid: null,
        },
        fname: {
          fnid: null,
        }
      },
      fnameList: [],
      cellList: [],
      // 分页数据
      pageIndex: 1,
      pageSize: 4,
      total: 0,
      // 展示
      feeList: [],
      sels: [], // 列表多选选中行
      // 弹出框
      dialogFormVisible: false,
      dialogTitle: "",
      dialogRules: {
        // *重点：编辑的时候改小区名称不行，会提示没选。这里
        //  多表查询的条件需要在规则rule外再嵌套一层： 'xx.xxx': [{x, x, x}],
        //  而且prop=""里的值必须和v-model里的一样 比如这里v-model后面就是cell.id,rule这里也必须是cell.id
        'cell.cid': [
          { required: true, trigger: 'change', message: '请选择小区名称' }
        ],
        'fname.fnid': [
          { required: true, trigger: 'change', message: '请输收费项目名称' }
        ],
        ftype: [
          { required: true, trigger: 'blur', message: '请输入收费类型' }
        ],
        calcumethod: [
          { required: true, trigger: 'blur', message: '请输入金额计算方式' }
        ],
        uprice: [
          { required: true, trigger: 'blur', message: '请输入收费单价' },
          { pattern: /^\d+(\.\d+)?$/, message: '输入数据不符合规则,请正确输入单价', trigger: 'blur' }
        ],
        measuring: [
          { required: true, trigger: 'blur', message: '请输入计量方式' }
        ],
        cycle: [
          { required: true, trigger: 'blur', message: '请输入收费周期' }
        ]
      },
      feeForm: {
        cell: {
          cid: null,
          cname: "",
        },
        fname: {
          fnid: null,
          fname: "",
        }
      }
    }
  },
  methods: {
    selsChange: function (sels) {
      this.sels = sels;
    },
    handleSizeChange(val) {
      // 页大小改变，重新查询
      this.pageSize = val;
      this.getAllFee();
    },
    handleCurrentChange(val) {
      // 当前页改变，重新查询
      this.pageIndex = val;
      this.getAllFee();
    },
    getFnameList() {
      this.$axios.get("/fee/findFnameList").then((resp) => {
        this.fnameList = resp.data.data;
      })
    },
    getAllFee() {
      this.$axios.post("/fee/findAll/" + this.pageIndex + "/" + this.pageSize, this.feeSearch).then((resp) => {
        this.feeList = resp.data.data.beanList;
        this.total = resp.data.data.totalRecord;
      })
    },
    getAllFeeButton() {
      this.pageIndex = 1;
      this.pageSize = 4;
      this.getAllFee();
    },
    // // 跳转至新增页面
    // toFeeAddPage() {
    //   this.$router.push("/feeStandardAdd");
    // },
    // // 跳转到编辑页面
    // handleEdit(index, row) {
    //   console.log(index, row);
    //   this.$router.push("/feeModify/" + row.eid);
    //   this.sample = Object.assign({}, row);
    // },

    // 新增弹出框
    handleAdd() {
      this.dialogFormVisible = true;
      this.dialogTitle = "新增费用";
      this.feeForm = {
        cell: {
          cid: null,
          cname: "",
        },
        fname: {
          fnid: null,
          fname: "",
        }
      };
    },
    // 编辑弹出带表单的对话框
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.dialogTitle = "编辑费用";
      // 回显编辑前的数据 ES6的语法
      this.feeForm = { ...row };
    },

    // 确认编辑或新增
    upOrAdd(formName) {
      //验证方法
      this.$refs[formName].validate((valid) => {
        //将refs中的数据放入validate校验器中验证，（valid）为一个回调函数
        //验证成功则发送请求传递给后端
        if (valid) {
          this.$axios.post("/fee/upOrAdd", this.feeForm).then((resp) => {
            if (resp.data.code == 200) {
              this.$message({
                message: JSON.stringify(resp.data.msg),
                type: 'success'
              })
              this.getAllFee();
              this.dialogFormVisible = false;
            } else {
              this.$message({
                message: JSON.stringify(resp.data.msg),
                type: 'warning'
              })
            }
          });
        }
      });
    },
    // 关闭对话框
    closeDialog() {
      // 清空前端验证的提示
      this.$refs.feeUpOrAdd.resetFields();
      // 清空数据
      this.feeForm = {
        cell: {
          cid: null,
          cname: "",
        },
        fname: {
          fnid: null,
          fname: ""
        }
      };
    },
    // 对话框取消
    cancel(formName) {
      this.$refs[formName].clearValidate();
      this.dialogFormVisible = false
    },
    // 获取所有小区
    getAllCell() {
      this.$axios.post("/fee/findAllCell").then((resp) => {
        this.cellList = resp.data.data;
      })
    },

    // 单行删除
    handleDel(index, row) {
      this.$confirm('确认删除该记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$axios.post('/fee/delById/' + row.fid).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getAllFee();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 批量删除,逻辑删除，并没有真的删除，而是改变状态，后台不展示此状态的数据
    batchRemove() {
      var ids = this.sels.map(item => item.fid);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let para = { ids: ids };
        this.$axios.patch('/fee/batchdel', ids).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getAllFee();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }
  },
  mounted() {
    this.getAllCell();
    this.getFnameList();
    this.getAllFee();
  },
};

</script>

<style>
</style>  